
<div class="Swimming">
    <slot></slot>
    <div class="SwimmingBG_filter">
        <div class="SwimmingBG" style="background:{bg}"></div>
    </div>
</div>
<style>
.Swimming {
    position: relative;
    margin: auto;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.SwimmingBG_filter {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    filter: blur(10px);
}
.SwimmingBG {
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    /* background: radial-gradient(circle at 100% 100%, transparent 45%, #0963ff 55%, #53e5a6 65%, transparent 85%); */
    filter: url(#fractal);
    transform: rotate(45deg) scaleX(1.4);
    
}
</style>
    
<script>
    import { onMount,onDestroy } from 'svelte';
    export let bg="radial-gradient(circle at 100% 100%, transparent 45%, #0963ff 55%, #53e5a6 65%, transparent 85%)"
    let requestAnimationFrameId=null;
    let isDestroy=false;
    onMount(async () => {
            var filter = document.querySelector("#turbulence");
            var frames = 0;
            var rad = Math.PI / 180;
            function freqAnimation() {
            let bfx = 0.005;
            let bfy = 0.005;
            frames += 0.5
            bfx += 0.0025 * Math.cos(frames * rad);
            bfy += 0.0025 * Math.sin(frames * rad);

            let bf = bfx.toString() + ' ' + bfy.toString();
            filter.setAttributeNS(null, 'baseFrequency', bf);
            if(!isDestroy){
                requestAnimationFrameId=window.requestAnimationFrame(freqAnimation);
            }
            // console.log("动画执行中")
        }
        requestAnimationFrameId= window.requestAnimationFrame(freqAnimation);
	});
    onDestroy(()=>{
        isDestroy=true;
        window.cancelAnimationFrame(requestAnimationFrameId);
    })
</script>